import React from 'react';

class ClubSort extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'ClubSort';
        // mode 有两个可选值
        // club 就是主页的 俱乐部排序，
        // clubAthlete 就是俱乐部主页运动员的排序
        this.state = {
            mode: "club",
            tableTitle: [
                "排名","姓名","总分"
            ],
            athletes: [
                {
                    rank: "2",
                    name: "顾晨阳",
                    img: "",
                    club: "沈阳第一",
                    score: "20"
                },
                {
                    rank: "5",
                    name: "顾晨阳",
                    img: "",
                    score: "15"
                }
            ]
        }
    }
    render() {
        // 输出 表头
        let tableTitle = this.state.tableTitle.map(function(title, index){
            return (
                <span key={index} className={index==0?"":"wrap-item"}>{title}</span>
            );

        })

        //  检测是否有 俱乐部信息
        let athleteClub = function( athlete ) {
            console.log("athleteClub");
            console.log(athlete);

            if(athlete.club !== undefined || null ) {
                return <span> {athlete.club} </span>
            }
        }.bind(this)

        let athletesList = this.state.athletes.map(function( athlete, index ) {
            return (
                <li key={index}>
                    <a >
                        <span>{athlete.rank}</span>
                        <p className="athDetail">
                            <span>
                                <img src={athlete.img} />
                                {athlete.name}
                            </span>
                                {athleteClub(athlete)}
                            <span> <em>{athlete.score}</em>{this.state.mode=="club"?"分":"个"}</span>
                        </p>
                    </a>
                </li>
            )
        }.bind(this))
        return (
            <section className={this.state.mode} >
                <p className="tableTitle">
                    {tableTitle}
                </p>
                <ul>
                    {athletesList}
                </ul>
            </section>
        );
    }
}

export default ClubSort;
